<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="shortcut icon" href="images/ico.ico" />
<link href="css/header.css" rel="stylesheet" type="text/css"
	charset="utf-8" />
<link href="css/common.css" rel="stylesheet" type="text/css"
	charset="utf-8" />
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
	var rankflag = -1;
	function changeCategory(id) {
		var category = null;
		if(id == "color_select")
		{
			rankflag = 0;
			category = $('#color_select').val();
		}
		else if(id == "purpose_select")
		{
			rankflag = 1;
			category = $('#purpose_select').val();
		}
		else
			return;

		var param = {
			rankflag : rankflag,
			category : category
		};
		jQuery.post("getStoneListAjax.action", param, liststoneFunc, "json");
	}

	function liststoneFunc(data) {
		var temp = "";
		
		for (i = 0; i < data.alreadyRankedStonesList.length; i++) {
			
			temp += '<div><a href="stone/toStoneCompany.action?stoneId=' + data.alreadyRankedStonesList[i].id + '">'+ data.alreadyRankedStonesList[i].chineseName +'</a></div>';
		
		}
		if(rankflag == 1)
			$('#purpose_div').html(temp);
		else if(rankflag == 0)
			$('#color_div').html(temp);
	}

</script>
<title>排名列表</title>
</head>
<body>
	<div class="grid-m header div">
		<div class="banner">
			<img class="fl" src="images/logo.gif" /> <img class="fr"
				src="images/top_img.gif" />
		</div>
		<div class="clear"></div>
		<div class="nav">
			<ul>
				<li><a class="wh lar who"
					href="stone/showNewUploadStone.action?pageno=1"><b>石材</b> </a></li>
				<li class="bar"></li>
				<li><b class="wh lar">已合作</b> <span> <a
						href="provider/highSearchProvider.action?pageno=1&mainSearch=true&query="
						class="wh who">石材公司</a> <a href="loadStoneProcessor.action"
						class="wh who">石材加工厂</a> <a href="loadPhysicalDistribution.action"
						class="wh who">物流公司</a> <a href="loadHotel.action" class="wh who">酒店</a>
				</span></li>
				<li class="bar"></li>
				<li><b class="wh lar">已成交</b> <span> <a
						href="loadClient.action" class="wh who">客户</a> </span></li>
				<li class="bar"></li>
				<li><a class="wh lar who"
					href="project/searchProject.action?pageno=1&query=&mainSearch=true"><b>精品工程</b>
				</a>
				</li>
				<li><a class="wh lar who" href="rank/listRank.action"><b>排名</b>
				</a></li>
				<li class="bar"></li>
				<li><a class="wh lar who" href="loadAboutUs.action"><b>关于我们</b>
				</a></li>
			</ul>
		</div>
	</div>
	<div class="clear"></div>

	<style>
.search_list .hd {
	margin-top: 15px;
	padding-left: 10px;
	border-bottom: 1px solid #CCC;
	height: 90px;
	overflow: hidden;
}

.search_list .bd .left {
	width: 120px;
	height: auto;
	float: left
}

.search_list .bd .right {
	width: 620px;
	height: auto;
	float: left;
	padding-left: 10px;
}

.search_list .bd .myhd {
	color: blue;
	font-size: 14px;
	margin-bottom: 5px;
	display: table
}

.search_list .bd .mybd {
	color: #666;
	font-size: 12px;
	margin-bottom: 5px;
	line-height: 1.5;
	height: auto;
	display: block;
}

.search_list .bd .mybd font {
	color: #666;
}

.search_list .bd .mybd font.red {
	color: red;
}

.search_list .bd .myft font.green {
	color: #008000;
}

.search_list .bd .mybd font.tl {
	color: #999;
}

.search_list .bd .myft {
	color: #666;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 5px;
}

.search_list .bd li {
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dotted #EAEAEA
}

.search_list .bd li ul {
	display: table;
	height: auto;
}

.search_list .bd li ul li {
	margin: 0;
	margin-right: 15px;
	word-break: keep-all;
	white-space: nowrap;
	border: 0;
}

form,#fm {
	position: relative
}

td {
	text-align: left
}

img {
	border: 0
}

a {
	color: #00c
}

a:active {
	color: #f60
}

input {
	border: 0;
	padding: 0
}

#nv {
	height: 19px;
	font-size: 16px;
	margin: 0 0 4px;
	text-align: left;
	text-indent: 10px
}

.s_ipt_wr {
	width: 418px;
	height: 30px;
	display: inline-block;
	margin-right: 5px;
	background: url(images/input_bg.png) no-repeat -304px 0;
	border: 1px solid #b6b6b6;
	border-color: #9a9a9a #cdcdcd #cdcdcd #9a9a9a;
	vertical-align: top
}

.s_ipt {
	width: 405px;
	height: 22px;
	font: 16px/22px arial;
	margin: 5px 0 0 7px;
	background: #fff;
	outline: none
}

.s_btn {
	width: 95px;
	height: 32px;
	padding-top: 2px\9;
	font-size: 14px;
	background: #ddd url(images/input_bg.png);
	cursor: pointer
}

.s_btn_h {
	background-position: -100px 0
}

.s_btn_wr {
	width: 97px;
	height: 34px;
	display: inline-block;
	background: url(images/input_bg.png) no-repeat -202px 0;
	*position: relative;
	z-index: 0;
	vertical-align: top
}

#lg img {
	vertical-align: top;
	margin-bottom: 3px
}

#lk,#snv {
	margin: 33px 0
}

#lk span {
	font: 14px;
	font-weight: bold;
}

#nv a {
	text-decoration: none;
	font-size: 14px;
}

#snv .bl {
	font-size: 14px;
	font-weight: normal;
}

#snv .tl {
	font-size: 14px;
	font-weight: bold;
	color: blue;
	padding-right: 10px;
}

#lm {
	height: 60px
}

#lh {
	margin: 16px 0 5px;
	word-spacing: 3px
}

#cp,#cp a {
	color: #77c
}

.page {
	text-align: center;
	color: #333;
	font-size: 12px;
}

.fee {
	width: 650px;
	height: 28px;
	float: right;
	padding: 1px;
	overflow: hidden;
	border-bottom: 1px solid #bde2ff;
	line-height: 28px;
	font-family: '宋体';
	font-size: 14px;
	font-weight: normal;
}

.fee span {
	color: red;
	font-size: 12px;
}
</style>
	
	<div class="grid-m div">
		<div style="width:80%; float:left;">
			<div style="float:left;min-height:400px; width:30%; margin:0px 10px; text-align:center;line-height:30px;border-width:1px;border-style:solid;border-color:#eee;">
				<div>
					<div style="font-size:14px;font-weight:700;padding:10px;">供应商排名</div>
				</div>
				<c:forEach items="${alreadyRankedProvidersList}" var="provider">
					<div><a
						href="provider/getProvider.action?providerId=${provider.id}">${provider.name}</a>
					</div>
				</c:forEach>
			</div>
			<div style="float:left;min-height:400px;width:30%; margin:0px 10px; text-align:center;line-height:30px;border-width:1px;border-style:solid;border-color:#eee;">
				<div>
					<div style="font-size:14px;font-weight:700;padding:10px;">石材颜色排名 
						<select id="color_select" onchange="changeCategory('color_select')">
							<option value="白色">白色</option>
							<option value="黑色">黑色</option>
							<option value="红色">红色</option>
							<option value="灰色">灰色</option>
							<option value="黄色">黄色</option>
							<option value="蓝色">蓝色</option>
							<option value="绿色">绿色</option>
							<option value="紫色">紫色</option>
							<option value="棕色">棕色</option>
							<option value="青色">青色</option>
							<option value="彩色">彩色</option>
						</select>
					</div>
				</div>
				<div id = "color_div">
					<c:forEach items="${alreadyRankedStonesList}" var="stone">
						<div>
							<a href="stone/toStoneCompany.action?stoneId=${stone.id}">${stone.chineseName}</a>
						</div>
					</c:forEach>
				</div>
			</div>
			<div style="float:left;min-height:400px;width:30%;  margin:0px 10px; text-align:center;line-height:30px;border-width:1px;border-style:solid;border-color:#eee;">
				<div>
					<div style="font-size:14px;font-weight:700;padding:10px;">石材用途排名 
						<select id="purpose_select" onchange="changeCategory('purpose_select')">
							<option value="室内地面">室内地面</option>
							<option value="室内墙面">室内墙面</option>
							<option value="室外地面">室外地面</option>
							<option value="室外墙面">室外墙面</option>
							<option value="柱面">柱面</option>
							<option value="楼梯">楼梯</option>
							<option value="台面板">台面板</option>
							<option value="洗手池">洗手池</option>
							<option value="浴缸">浴缸</option>
							<option value="壁炉">壁炉</option>
							<option value="雕塑">雕塑</option>
							<option value="马赛克">马赛克</option>
						</select>
					</div>
				</div>
				<div id = "purpose_div">
					<c:forEach items="${alreadyRankedStonesList1}" var="stone">
						<div>
							<a href="stone/toStoneCompany.action?stoneId=${stone.id}">${stone.chineseName}</a>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
		<jsp:include page="stone/righter.jsp"></jsp:include>
	</div>
	<div class="clear"></div>
	<div class="grid-m foot">
		<p>Copyright&copy; 版权所有2011-2012 巨石汇中心 主办单位：巨石汇</p>
	</div>
</body>
</html>

